<template>
    <view class="allPage all">

        <div class="moreInfo parts">
            <!-- <view class="info-head">
                <view class="head-i active">
                    <text class="">评价</text> <text class="min">{{ commentTotal }}</text>
                </view>
                <view class="head-i">
                    <text class="">详情</text>
                </view>
            </view> -->

            <view class="comment-falg mb10">

                <view class="tag"  @click="queryList(undefined)" :class="{'active':selectKey == undefined }">
                    <text>全部 {{commentTotal}}</text>
                </view>

                <view class="tag" v-for="item,idx in commentTagArr" :key="item.key" @click="queryList(item.key)" :class="{'active':selectKey == item.key}">
                    <text>{{item.name}} {{item.value}}</text>
                </view>

            </view>

            <view v-for="item,idx in commentArr" :key="idx">
                
                <CommentParts :list="item" />

            </view>       
            
            
            <view v-if="nowTotal == 0">
         
                <No-data text="暂无评论~~"/>
            </view>

            <view class="text-center col-hui mt10 mb10" v-if="!hasMore">
                <text>没有咯~~</text>
            </view>

          
              
              

            <view style="height:50rpx"></view>

        </div>

    </view>
</template>

<script>




import CommentParts from '@/components/Comment/parts'

const app = getApp();
export default {
    components: { CommentParts },
    data () {
        return {
            //评价
            commentTagArr: [],
            commentArr: [], //二维数组
            commentTotal: '',
            nowTotal:0,

            json: {},
            queryForm: {
                pageNum: 1,
                pageSize: 6,
                goodsId: undefined,
                supermarketId: undefined,
                commentCheckStatus:1
            },
            hasMore:true,
            selectKey:undefined,
        }
    },

    onLoad (option) {

        this.json = option

        if(option.key){
            this.selectKey = option.key
        }

        this.getCommentStatic()

        this.getCommentList()

    },
    methods: {

        //评价的分组
        getCommentStatic () {

            this.$axios({ url: 'flash/supermarket/goods/comment/group/statistics', data: { goodsId: this.json.goodsId, supermarketId: this.json.supermarketId } })
                .then(res => {

                    // console.log('评价的', res)

                    let arr = []

                    res.data.map(item => {

                        if (item.value > 0) {

                            let keysArr = item.key.split('#')

                            arr.push({
                                name: keysArr[0],
                                key: keysArr[1],
                                value: item.value,
                            })

                        }

                    })

                    this.commentTagArr = arr
                })

        },
        //拉取评价
        getCommentList () {

            let queryForm =this.$deepClone( this.queryForm )

            if(this.selectKey){

                queryForm[this.selectKey] = 1

            }

            queryForm.goodsId =  this.json.goodsId 
            queryForm.supermarketId =  this.json.supermarketId

            this.$axios({
                url: 'flash/supermarket/goods/comment/page/list?loading', data: queryForm })
                .then(res => {

                    // console.log('评价的详情', res)

                    if(!this.selectKey){
                        this.commentTotal = res.total 
                    }

                    this.nowTotal = res.total 

                    let commentArr = res.data.map(item => {

                        item.assCommentHeadImg = this.$getImg(item.commentHeadImg, 1)

                        item.picStyle = ''

                        if (item.commentPicture) {

                            item.commentPics = item.commentPicture.split(',').map(p => {

                                return this.$getImg(p, 1)
                            })

                            item.picStyle = item.commentPics.length > 2 ? '' : item.commentPics.length > 1 ? 'middle' : 'big'
                        }
                        return item
                    })

                    this.$set(this.commentArr, this.queryForm.pageNum - 1 , commentArr)

                })

        },
        queryList(key){

            this.selectKey = key

            this.queryForm.pageNum = 1

            this.commentArr = []

            this.hasMore = true

            this.getCommentList()

        },
        //下拉刷新
        onPullDownRefresh () {

            this.queryForm.pageNum = 1

            this.initPage(() => {
                uni.stopPullDownRefresh();//停止刷新
            })

        },
        onReachBottom () {
            console.log('触底了')

            if (this.queryForm.pageNum * this.queryForm.pageSize < this.nowTotal) {

                this.queryForm.pageNum += 1

                this.hasMore = true

                this.getCommentList()
            }
            else{
                this.hasMore = false
            }

        },

    }
}
</script>

<style scoped lang="scss">
.all {
    min-height: 100vh;
    box-sizing: border-box;
}
.moreInfo {
    padding: 30rpx 30rpx 20rpx;
    .info-head {
        overflow: hidden;
        line-height: 44px;
        height: 44px;
        font-size: 32rpx;
        .head-i {
            vertical-align: top;
            display: inline-block;
            padding-right: 36rpx;
            color: #999;
            font-weight: 500;
            &.active {
                color: #222;
            }
            .min {
                font-size: 22rpx;
                margin-left: 4rpx;
            }
        }
    }
}
.comment-falg {
    padding: 2rpx 0;
    margin-left: -8px;
    min-height: 44rpx;
    .tag {
        background-color: rgb(255, 248, 225);
        // background:#f5efd2 ;
        color: #333;
        line-height: 1.2;
        border-radius: 6rpx;
        font-size: 26rpx;
        padding: 8rpx 12rpx;
        // margin-left: 8rpx;
        margin: 4rpx 0 4rpx 8rpx;
        display: inline-block;
        vertical-align: top;
        &.active{
            background-color: rgb(249, 221, 75);
        }
    }
}
</style>
